<template>
	<view>
		<view class="search-wrap">
			<!-- #ifndef H5 -->
			<input class="search-input" ref="searchInput" v-model="value" :type="type" :placeholder="searchPlaceHolder" confirm-type="search" auto-blur @focus="focus($event)" @blur="blur($event)"  @input="change($event)" @confirm="search($event)">
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<input class="search-input" ref="searchInput" :type="type" :placeholder="searchPlaceHolder" confirm-type="search" auto-blur @focus="focus($event)" @blur="blur($event)" @input="change($event)" @confirm="search($event)">
			<!-- #endif -->
			<view class="search-prifex" @click="clickSearch">
				<u-icon name="search" size="40" color="#CCCCCC"></u-icon>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			type: {
				type: String,
				default: 'text'
			},
			searchPlaceHolder: {
				type: String,
				default: '订单号'
			}
		},
		data() {
			return {
				value: ''
			}
		},
		methods: {
			focus(e) {
				this.$emit('focus', e)
			},
			blur(e) {
				this.$emit('blur', e)
			},
			search(e) {
				this.$emit('search', e.detail.value)
			},
			change(e){
				this.$emit('change', e.detail.value);
			},
			clickSearch() {
				// #ifdef H5
				this.$emit('search', this.$refs.searchInput.valueSync)
				// #endif
				// #ifndef H5
				this.$emit('search', this.value)
				// #endif
			}
		}
	}
</script>

<style lang="scss" scoped>
	// 搜索栏位
	.search-wrap {
		// padding: 0 35rpx;
		margin: 0 35rpx;
		border: 2rpx solid $theme-color;
		border-radius: 40rpx;
		display: flex;
		justify-content: space-between;
		text-align: center;
		align-items: center;
		.search-input{
			flex:1;
			height: 70rpx;
			// line-height: 70rpx;
			font-size: 28rpx;
			margin-left: 30rpx;
			border: 0;
			// border: 2rpx solid $theme-color;
			// border-radius: 30rpx;
			opacity: 0.75;
		}
		.search-prifex {
			// line-height: 60rpx;
			margin-right: 30rpx;
		}
	}
</style>
